<script setup lang="ts">
import { add, modify, type FormData } from '@/api/api-manage/create'
import { getApiDetail } from '@/api/api-manage/detail'
import useRouteQuery from '@/hooks/useRouteQuery'
import { omitEmptyValue } from '@/utils/common'
import { message } from '@/utils/message'
import { reactive, ref, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import { z } from 'zod'
import BasicInfoForm from './components/BasicInfoForm.vue'
import RequestInfoForm from './components/define-interface/index.vue'
import ResponseInfoForm from './components/ResponseInfoForm.vue'

const querySchema = z.object({
  id: z.string().optional(),
})

const query = useRouteQuery(querySchema)
const router = useRouter()
const [loading, toggleLoading] = useToggle(false)

defineOptions({
  name: 'api-manage/apply',
})

const formData = reactive<FormData>({
  apiName: '',
  apiType: '',
  apiCatalog: '',
  apiAuth: '',
  encryptionType: [],
  apiDesc: '',
  requestProtocol: '',
  // requestProtocol: [],
  requestMethod: '',
  serverNetworkType: '',
  // serverNetworkType: [],
  requestPath: '',
  serverProdPath: '',
  serverTestPath: '',
  serverUri: '',
  requestTimeOut: 1,
  serverContentType: '',
  apiParamList: [],
  responseType: '',
  responseExampleValue: '',
  responseFailValue: '',
  apiResponseList: [],
  apiErrorCodeBoList: [],
  algorithmBasic: [],
  version: null,
  checkStatus: null,
  apiIntro: '',
  apiIconPth: '',
  ossId: '',
})
const step = ref(1)

async function setInitData(id: string) {
  loading.value = true
  const { data } = await getApiDetail(id).finally(() => (loading.value = false))
  formData.apiAuth = data.apiAuth
  formData.apiCatalog = data.apiCatalog
  formData.apiDesc = data.apiDesc
  formData.apiErrorCodeBoList = data.apiErrorCodeList || []
  formData.apiIconPth = data.apiIconPth
  formData.apiIntro = data.apiIntro
  formData.apiName = data.apiName
  formData.apiParamList = data.apiParamList || []
  formData.apiResponseList = data.apiResponseList || []
  formData.apiType = data.apiType
  formData.checkStatus = data.checkStatus
  formData.ossId = data.ossId
  formData.requestMethod = data.requestMethod
  formData.requestPath = data.requestPath
  formData.requestProtocol = data.requestProtocol
  formData.requestTimeOut = data.requestTimeOut
  formData.responseExampleValue = data.responseExampleValue
  formData.responseFailValue = data.responseFailValue
  formData.responseType = data.responseType
  formData.serverContentType = data.serverContentType
  formData.serverNetworkType = data.serverNetworkType
  formData.serverProdPath = data.serverProdPath
  formData.serverUri = data.serverUri
  formData.serverTestPath = data.serverTestPath
  formData.version = data.version

  if (data.algorithmBasic) {
    formData.algorithmBasic = data.algorithmBasic.split(',')
  }
  if (data.encryptionType) {
    formData.encryptionType = data.encryptionType.split(',')
  }
}

async function onSubmit() {
  const data = toRaw(formData)
  const ddd = omitEmptyValue({
    ...data,
    algorithmBasic: data.algorithmBasic.join(','),
    encryptionType: data.encryptionType.join(','),
  })

  toggleLoading(true)
  try {
    if (query.id) {
      await modify({ ...ddd, id: query.id })
      message('修改接口成功', { type: 'success' })
    } else {
      await add(ddd)
      message('创建接口成功', { type: 'success' })
    }
    router.push('/api-manage/my-list')
  } finally {
    toggleLoading(false)
  }
}

if (query.id) setInitData(query.id)
</script>

<template>
  <div v-loading="loading" class="space-y-2">
    <card>
      <template #title>
        <span>创建接口</span>
      </template>
      <template #operation>
        <el-button type="primary" @click="router.back()">返回</el-button>
      </template>
      <el-steps align-center :active="step">
        <el-step title="基础信息" />
        <el-step title="定义接口" />
        <el-step title="定义返回结果" />
      </el-steps>
      <div class="w-[720px] m-auto p-4">
        <basic-info-form v-show="step === 1" v-model:form-data="formData" @next="step = 2" />
        <request-info-form
          v-show="step === 2"
          v-model:form-data="formData"
          @previous="step = 1"
          @next="step = 3"
        />
        <response-info-form
          v-show="step === 3"
          v-model:form-data="formData"
          @previous="step = 2"
          @next="onSubmit"
        />
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
